<template>
	<el-container>
		<el-header>
			<nagivation ref="nagivation" />
		</el-header>
		<el-row :gutter="50" type="flex" justify="center">
			<el-col :span="16">
				<div v-if="isLogin">
					<el-empty description="你还没有登录"></el-empty>
					<div>
						<el-button @click="gologin" type="primary">点击登录</el-button>
					</div>
				</div>

				<el-empty description="你还没关注作者，去首页看看吧" v-if="isShowEmpty"></el-empty>
				<div v-if="isShowArticle">
					<div v-for="item in article" :key="item.articleId"
						style="position:relative;border:1px black solid;margin:10px">
						<div style="position:absolute;top:20px;left:15px;color: darkgray;">
							<el-tag>{{ item.createTime }}</el-tag>
							<el-tag>阅读总数是{{ item.viewCount }}</el-tag>
						</div>
						<div style="text-align:center">
							<div>
								<h1>{{ item.title }}</h1>
							</div>
							<div style="height:30px;margin-bottom:30px">
								<el-avatar :src="item.avatar" size="small"></el-avatar>
								<h3 style="display:inline-block;line-height:30px;">{{ item.username }}</h3>
							</div>
						</div>
						<div class="content">
							<div class="text more" ref="more">
								占位
							</div>
							<div class="text">
								<div :class="{ 'retract': item.status }"
									:style="{ 'max-height': item.status ? textHeight : '' }" ref="textContainer">
									<h4 v-html="item.content"></h4>
								</div>
								<div class="btn">
									<p v-if="item.status" @click="item.status = false; updateViewCount(item.articleId)">
										展开</p>
									<p v-if="item.status == false" @click="item.status = true">收起</p>
								</div>
							</div>
						</div>
						<el-badge is-dot class="item">
							<el-button size="small" @click="expansion(item.articleId)">评论</el-button>
						</el-badge>
						<el-badge is-dot class="item">
							<el-button size="small" @click="expansion(item.articleId)">回复</el-button>
						</el-badge>
						<el-divider><i class="el-icon-mobile-phone"></i></el-divider>
					</div>
				</div>

			</el-col>
			<el-col :span="6">
				<el-card>
					<i class="el-icon-user-solid"></i><span class="articleAndTagStyle">文章分类</span>
					<div v-for="item in attentionUser" :key="item.userId">
						<el-col :span="8">
							<div class="attentionUser"
								style="display: flex; justify-content: center;margin-bottom:20px">
								<el-button type="success">{{ item.username }}<i class="el-icon-user el-icon--right"></i>
								</el-button>
							</div>
						</el-col>
					</div>
				</el-card>
			</el-col>
		</el-row>
		<commentArticle ref="isShowCommentArticle" />
	</el-container>
</template>

<script>
import api from '@/utils/api.js'
import { getToken, getUserName, getUserId } from '@/utils/auth'
import commentArticle from '../component/commentArticle.vue';
import nagivation from '../component/nagivation.vue';
import apiuser from '@/utils/apiUser.js'
import unlogin from './unlogin.vue';
export default {
	data() {
		return {
			textHeight: null,
			article: [],
			dialogVisible: false,
			attentionUser: [],
			isShowEmpty: false,
			isShowArticle: true,
			isLogin: false
		}
	},
	components: {
		nagivation, commentArticle, unlogin
	},
	mounted() {
		this.article.forEach((ele, index) => {
			this.$set(this.article, index, Object.assign({}, ele, { status: null }))
		})
		// DOM 加载完执行
		this.$nextTick(() => {
			setTimeout(() => {
				this.calculateText()
			}, 1000)

		})

		window.onresize = () => {
			this.article.forEach((ele, index) => {
				this.$set(this.article, index, Object.assign({}, ele, { status: null }))
			})
			setTimeout(() => {
				this.calculateText()
			}, 0)
		}
	},
	created() {
		var token = getToken()
		console.log('token是', token)
		if (token == undefined) {
			console.log('进入了')
			this.isLogin = true
			this.isShowEmpty = false
			this.isShowArticle = false
		} else {
			var username = getUserName()
			if (username == '' || username == undefined || username == null) {
				this.getUserInfo()
			}
			if (this.article.length < 1) {
				this.indexAttentionArticle()
			}
			if (this.attentionUser.length < 1) {
				this.indexAttentionUser()
			}
		}

	},
	methods: {
		updateViewCount(articleId) {
			api.updateArticleViewCount(articleId)
		},
		gologin() {
			console.log('点击了')
			this.$router.push({
				name: 'login'
			})
		},
		expansion(articleId) {
			if (articleId > 0) {
				api.findArticleComment(articleId).then(res => {
					console.log('comment是', res.data)
					if (res.data.length > 0) {
						this.$refs.isShowCommentArticle.commentList = res.data
						this.$refs.isShowCommentArticle.articleId = articleId
					} else {
						this.$refs.isShowCommentArticle.commentList = null
						this.$refs.isShowCommentArticle.articleId = articleId
					}
				})
				if (this.$refs.isShowCommentArticle.commentList.length > 0) {
					this.$refs.isShowCommentArticle.drawer = true
				}
			} else {
				this.$message({
					type: 'error',
					message: '查看评论失败'
				})
			}
		},
		getUserInfo() {
			this.$store.dispatch('GetInfo').then(() => {
			})
		},
		indexAttentionArticle() {
			var userId = getUserId()
			if (userId == "") {
				userId = -1
			}
			apiuser.getAttentionArticle(userId).then(res => {
				console.log(res.data)
				this.article = res.data
				console.log('article是', this.article)
				if (res.data == null) {
					this.isShowEmpty = true
					this.isShowArticle = false
				}
			}).catch(error => {
				console.log(error)
			})
		},
		indexAttentionUser() {
			var userId = getUserId()
			console.log('关注作者的useri是', userId)
			if (userId == "") {
				userId = -1
			}
			apiuser.getAttentionUser(userId).then(res => {
				console.log('关注是user', res.data)
				this.attentionUser = res.data
			}).catch(error => {
				console.log(error)
			})
		},
		calculateText() {
			// 获取一行文字的height 计算当前文字比较列表文字
			let oneHeight = this.$refs.more.scrollHeight
			let twoHeight = oneHeight * 2 || 40
			this.textHeight = `${twoHeight}px`
			let txtDom = this.$refs.textContainer
			for (let i = 0; i < txtDom.length; i++) {
				let curHeight = txtDom[i].offsetHeight
				if (curHeight > twoHeight) {
					this.$set(this.article, i, Object.assign({}, this.article[i], { status: true }))
				} else {
					this.$set(this.article, i, Object.assign({}, this.article[i], { status: null }))
				}
			}
		},
	}
}
</script>

<style scoped>
.item {
	margin-left: 15px;
	margin-bottom: 10px;
	margin-top: -10px;
}

.attentionUser:hover {
	color: aquamarine;
}

.content {
	display: flex;
	margin-bottom: 30px;
}

.text {
	position: relative;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: 2px;
	color: #666666;
}

.retract {
	position: relative;
	overflow: hidden;
}

.retract:after {
	content: '...';
	position: absolute;
	bottom: 0;
	right: 2px;
	width: 25px;
	padding-left: 30px;
	background: linear-gradient(to right, transparent, #fff 45%);
}

.btn {
	position: absolute;
	right: 0;
	bottom: -30px;
	font-size: 14px;
	line-height: 19px;
	letter-spacing: 2px;
	color: #FFAD41;
	cursor: pointer;
}

.more {
	font-size: 14px;
	line-height: 20px;
	letter-spacing: 2px;
	color: #666666;
	visibility: hidden;
}
</style>

